<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="fonts">
      <el-breadcrumb-item :to="{ path: '/shop' }">内容管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/shop' }">4S店管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改4S店</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
      style="width: 300px; margin-top: 30px"
    >
      <el-form-item label="店铺名称" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入4S店名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺短名称" prop="shortName">
        <el-input
          v-model="ruleForm.shortName"
          placeholder="请输入4S店短名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺主修品牌" prop="imports">
        <el-select v-model="ruleForm.cname" placeholder="请选择汽车品牌">
          <el-option
            v-for="item in cartables"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺折扣" prop="discount">
        <span style="margin-right: 10px">工时</span>
        <el-input v-model="ruleForm.discount" style="width: 50px"></el-input>
        <span style="margin-left: 10px">折</span>
      </el-form-item>
      <el-form-item label="所在区域" prop="imports">
        <el-select v-model="ruleForm.area" placeholder="请选择区域">
          <div>
            <el-option
              v-for="item in area"
              :key="item.id"
              :label="item.name"
              :value="item.vule"
            ></el-option>
          </div>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺地址" prop="location">
        <el-input
          v-model="ruleForm.location"
          placeholder="请输入店铺地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺是否签约" prop="imports">
        <el-radio v-model="ruleForm.sign" label="未签约" value="未签约"
          >未签约</el-radio
        >
        <el-radio v-model="ruleForm.sign" label="已签约" value="已签约"
          >已签约</el-radio
        >
      </el-form-item>
      <div>
        <el-button type="primary" style="margin-left: 50px" @click="saveBtn"
          >保存</el-button
        >
        <el-button style="margin-left: 40px" @click="backlbtn">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  befordestroy() {
    sessionStorage.removeItem("store");
  },

  data() {
    return {
      cartables: [],
      ruleForm: {},

      //规则
      rules: {
        name: [{ required: true, message: "请输入4S店名称", trigger: "blur" }],
        shortName: [
          { required: true, message: "请输入4S店短名称", trigger: "blur" },
        ],
        imports: [{ required: true, trigger: "blur" }],
        location: [
          { required: true, message: "请输入店铺地址", trigger: "blur" },
        ],
        discount: [{ required: true, message: "请输入折扣", trigger: "blur" }],
      },

      //区域表
      area: [
        { id: 1, name: "锦江区", vule: "锦江区" },
        { id: 2, name: "青羊区", vule: "青羊区" },
        { id: 3, name: "金牛区", vule: "金牛区" },
        { id: 4, name: "武侯区", vule: "武侯区" },
        { id: 5, name: "成华区", vule: "成华区" },
        { id: 6, name: "龙泉驿区", vule: "龙泉驿区" },
        { id: 7, name: "青白江区", vule: "青白江区" },
        { id: 8, name: "新都区", vule: "新都区" },
        { id: 9, name: "温江区", vule: "温江区" },
        { id: 10, name: "双流区", vule: "双流区" },
        { id: 11, name: "郫都区", vule: "郫都区" },
        { id: 12, name: "新津区", vule: "新津区" },
        { id: 13, name: "高新区", vule: "高新区" },
        { id: 14, name: "简阳市", vule: "简阳市" },
        { id: 15, name: "都江堰市", vule: "都江堰市" },
        { id: 16, name: "彭州市", vule: "彭州市" },
        { id: 17, name: "邛崃市", vule: "邛崃市" },
        { id: 18, name: "大邑市", vule: "大邑市" },
        { id: 19, name: "蒲江县", vule: "蒲江县" },
        { id: 20, name: "成都天府新区", vule: "成都天府新区" },
      ],
    };
  },
  created() {
    let data = JSON.parse(sessionStorage.getItem("store"));
    this.table = data;
    this.ruleForm = this.table;

    // console.log(this.ruleForm);

    //汽车品牌下拉
    this.$axios({
      url: "/carBrand/list",
      method: "POST",
      data: {
        limit: 100,
      },
    }).then((res) => {
      // console.log(res);
      if (res.data.code === 0) {
        this.cartables = [...res.data.data];
        // console.log(this.cartables);
      }
    });
  },

  methods: {
    //确认修改请求
    saveBtn() {
      // console.log(1111);
      

      this.ruleForm["carBrandId"] = this.ruleForm.cname;
      // console.log(this.ruleForm.cname);
      // console.log(this.ruleForm);
      this.$axios({
        url: "/S4Manage/update",
        method: "POST",
        data: this.ruleForm,
      }).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          // console.log(this.ruleForm.carBrandId);
          this.$message('修改成功');
          this.$router.push({ path: "/shop" })
        }
      });
      // this.$axios({
      //   url: "/carBrand/list",
      //   method: "post",
      //   data: {
      //     name: this.ruleForm.cname,
      //   },
      // }).then((res) => {
      //   console.log(res);
      //   console.log(this.ruleForm.cname);
      //   console.log(res.data.data.name);
      //   if (res.data.code === 0) {
      //       if ((this.ruleForm.cname = res.data.data.name)) {
      //         this.ruleForm["carBrandId"] = res.data.data.id;
      //         console.log(this.ruleForm);
      //         // this.$axios({
      //         //   url: "/S4Manage/update",
      //         //   method: "POST",
      //         //   data: this.ruleForm,
      //         // }).then((res) => {
      //         //   console.log(res);
      //         //   // console.log(this.ruleForm.carBrandId);
      //         //   // this.$router.push({ path: "/shop" })
      //         // });
      //       }

      //   }
      //   console.log(this.ruleForm);
      // });

      // console.log(this.ruleForm);
    },
    backlbtn(){
      this.$router.push('/shop')
    },
  },
};
// export default {
//   befordestroy() {
//     sessionStorage.removeItem("store");
//   },
//   data() {
//     return {
//       cartables: [],
//       table: {},
//       ruleForm: {},
//       rules: {
//         name: [{ required: true, message: "请输入4S店名称", trigger: "blur" }],
//         shortName: [
//           { required: true, message: "请输入4S店短名称", trigger: "blur" },
//         ],
//         imports: [{ required: true, trigger: "blur" }],
//         storeaddress: [
//           { required: true, message: "请输入4S店地址", trigger: "blur" },
//         ],
//         discount: [{ required: true, message: "请输入折扣", trigger: "blur" }],
//       },
//       area: [
//         { id: 1, name: "锦江区", vule: "锦江区" },
//         { id: 2, name: "青羊区", vule: "青羊区" },
//         { id: 3, name: "金牛区", vule: "金牛区" },
//         { id: 4, name: "武侯区", vule: "武侯区" },
//         { id: 5, name: "成华区", vule: "成华区" },
//         { id: 6, name: "龙泉驿区", vule: "龙泉驿区" },
//         { id: 7, name: "青白江区", vule: "青白江区" },
//         { id: 8, name: "新都区", vule: "新都区" },
//         { id: 9, name: "温江区", vule: "温江区" },
//         { id: 10, name: "双流区", vule: "双流区" },
//         { id: 11, name: "郫都区", vule: "郫都区" },
//         { id: 12, name: "新津区", vule: "新津区" },
//         { id: 13, name: "高新区", vule: "高新区" },
//         { id: 14, name: "简阳市", vule: "简阳市" },
//         { id: 15, name: "都江堰市", vule: "都江堰市" },
//         { id: 16, name: "彭州市", vule: "彭州市" },
//         { id: 17, name: "邛崃市", vule: "邛崃市" },
//         { id: 18, name: "大邑市", vule: "大邑市" },
//         { id: 19, name: "蒲江县", vule: "蒲江县" },
//         { id: 20, name: "成都天府新区", vule: "成都天府新区" },
//       ],
//     };
//   },
//   created() {
//     let data = JSON.parse(sessionStorage.getItem("store"));
//     this.table = data;
//     // this.ruleForm = this.table;
//     console.log(this.table);

//     //汽车品牌下拉
//     this.$axios({
//       url: "/carBrand/list",
//       method: "POST",
//       data: {
//         limit: this.count,
//       },
//     }).then((res) => {
//       console.log(res);
//       if (res.data.code === 0) {
//         this.cartables = [...res.data.data];
//         console.log(this.cartables);
//       }
//     });

//     //
//   },
//   methods: {
//     //确认修改请求
//     // saveBtn() {
//     //   console.log(this.ruleForm.cname);
//     //   this.$axios({
//     //   })
//     //   // this.$axios({
//     //   //   url: "/carBrand/list",
//     //   //   method: "POST",
//     //   //   data: { name: this.ruleForm.carBrandId },
//     //   // }).then((res) => {
//     //   //   console.log(res);
//     //   //   if (res.data.code === 0) {
//     //   //     console.log(res.data.data);
//     //   //     res.data.data.forEach((item) => {
//     //   //       console.log(item.name);
//     //   //       console.log(this.ruleForm.carBrandId);
//     //   //       // console.log(item.name === this.ruleForm.carBrandId);
//     //   //       if (item.name === this.ruleForm.carBrandId) {
//     //   //         this.ruleForm.carBrandId = item.id;
//     //   //         console.log(this.ruleForm.carBrandId);
//     //   //       }
//     //   //     });
//     //   //   }
//     //   // });
//     // },
//   },
// };
</script>

<style>
.fonts{
  font-size: 15px;
}
</style>